<template>
	<view class="theme-selector">
		<!-- 主题选择器触发按钮 -->
		<view class="theme-trigger" @click="showSelector">
			<view class="current-theme-icon">{{currentTheme.icon}}</view>
			<text class="current-theme-name">{{currentTheme.name}}</text>
			<text class="selector-arrow">⚙️</text>
		</view>

		<!-- 主题选择器弹窗 -->
		<uni-popup ref="themeSelectorPopup" type="bottom" :mask-click="false">
			<view class="theme-selector-popup">
				<view class="popup-header">
					<text class="popup-title">选择主题</text>
					<text class="popup-close" @click="hideSelector">✕</text>
				</view>
				
				<view class="themes-grid">
					<view 
						v-for="theme in themes" 
						:key="theme.id"
						class="theme-card"
						:class="{ active: theme.id === currentTheme.id, previewing: previewingTheme === theme.id }"
						@click="selectTheme(theme.id)"
						@touchstart="startPreview(theme.id)"
						@touchend="endPreview"
						@touchcancel="endPreview"
					>
						<!-- 主题预览区域 -->
						<view class="theme-preview">
							<view class="preview-header" :style="getThemeStyle(theme, 'primary')">
								<view class="preview-icon">{{theme.icon}}</view>
								<view class="preview-text" :style="getThemeStyle(theme, 'textInverse')">示例</view>
							</view>
							<view class="preview-body" :style="getThemeStyle(theme, 'bgSecondary')">
								<view class="preview-item">
									<view class="preview-dot" :style="getThemeStyle(theme, 'accent')"></view>
									<text class="preview-label" :style="getThemeStyle(theme, 'textPrimary')">收入</text>
									<text class="preview-amount success" :style="getThemeStyle(theme, 'success')">+100</text>
								</view>
								<view class="preview-item">
									<view class="preview-dot" :style="getThemeStyle(theme, 'error')"></view>
									<text class="preview-label" :style="getThemeStyle(theme, 'textPrimary')">支出</text>
									<text class="preview-amount error" :style="getThemeStyle(theme, 'error')">-50</text>
								</view>
							</view>
						</view>
						
						<!-- 主题信息 -->
						<view class="theme-info">
							<text class="theme-name">{{theme.name}}</text>
							<text class="theme-desc">{{theme.description}}</text>
						</view>
						
						<!-- 选中状态指示器 -->
						<view v-if="theme.id === currentTheme.id" class="selected-indicator">
							<text class="check-icon">✓</text>
						</view>
						
						<!-- 预览状态指示器 -->
						<view v-if="previewingTheme === theme.id" class="preview-indicator">
							<text class="preview-text">预览中</text>
						</view>
					</view>
				</view>
				
				<!-- 操作按钮 -->
				<view class="popup-actions">
					<button class="action-btn cancel" @click="hideSelector">取消</button>
					<button class="action-btn confirm" @click="confirmSelection" :disabled="!selectedTheme">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import themeManager from '@/utils/theme.js'
	
	export default {
		name: 'ThemeSelector',
		data() {
			return {
				themes: [],
				currentTheme: {},
				selectedTheme: null,
				previewingTheme: null,
				previewTimer: null
			}
		},
		created() {
			this.loadThemes()
			this.setupThemeListener()
		},
		beforeDestroy() {
			if (this.themeListener) {
				this.themeListener()
			}
			this.clearPreviewTimer()
		},
		methods: {
			// 加载主题列表
			loadThemes() {
				this.themes = themeManager.getThemes()
				this.currentTheme = themeManager.getCurrentTheme()
			},
			
			// 设置主题变更监听器
			setupThemeListener() {
				this.themeListener = themeManager.addListener((theme) => {
					this.currentTheme = theme
				})
			},
			
			// 显示主题选择器
			showSelector() {
				this.selectedTheme = this.currentTheme.id
				this.$refs.themeSelectorPopup.open()
			},
			
			// 隐藏主题选择器
			hideSelector() {
				this.cancelPreview()
				this.$refs.themeSelectorPopup.close()
			},
			
			// 选择主题
			selectTheme(themeId) {
				this.selectedTheme = themeId
				// 立即预览选中的主题
				this.previewTheme(themeId)
			},
			
			// 确认选择
			confirmSelection() {
				if (this.selectedTheme) {
					themeManager.setTheme(this.selectedTheme)
					uni.showToast({
						title: `已切换到${themeManager.getTheme(this.selectedTheme).name}主题`,
						icon: 'success'
					})
				}
				this.hideSelector()
			},
			
			// 开始预览主题（长按）
			startPreview(themeId) {
				this.clearPreviewTimer()
				this.previewTimer = setTimeout(() => {
					this.previewTheme(themeId)
				}, 500) // 500ms后开始预览
			},
			
			// 结束预览
			endPreview() {
				this.clearPreviewTimer()
				if (this.previewingTheme && this.previewingTheme !== this.selectedTheme) {
					this.cancelPreview()
				}
			},
			
			// 预览主题
			previewTheme(themeId) {
				this.previewingTheme = themeId
				themeManager.previewTheme(themeId)
			},
			
			// 取消预览
			cancelPreview() {
				this.previewingTheme = null
				themeManager.cancelPreview()
			},
			
			// 清除预览定时器
			clearPreviewTimer() {
				if (this.previewTimer) {
					clearTimeout(this.previewTimer)
					this.previewTimer = null
				}
			},
			
			// 获取主题样式
			getThemeStyle(theme, colorKey) {
				const color = theme.colors[colorKey]
				if (!color) return {}
				
				return {
					backgroundColor: colorKey.includes('bg') || colorKey.includes('primary') || colorKey.includes('accent') ? color : undefined,
					color: colorKey.includes('text') || colorKey.includes('success') || colorKey.includes('error') ? color : undefined,
					borderColor: colorKey.includes('border') ? color : undefined
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../uni.scss';
	
	.theme-selector {
		position: relative;
	}
	
	/* 主题触发按钮 */
	.theme-trigger {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		border: 2rpx solid $cute-border;
		box-shadow: $cute-card-shadow;
		transition: $cute-transition;
		cursor: pointer;
		
		&:hover {
			transform: $cute-hover-transform;
			box-shadow: 0 15rpx 50rpx $cute-shadow-medium;
		}
		
		&:active {
			transform: $cute-active-transform;
		}
	}
	
	.current-theme-icon {
		font-size: 40rpx;
		margin-right: 20rpx;
	}
	
	.current-theme-name {
		flex: 1;
		font-size: 30rpx;
		color: $cute-text-primary;
		font-weight: 500;
	}
	
	.selector-arrow {
		font-size: 32rpx;
		color: $cute-text-tertiary;
		transition: transform 0.3s;
	}
	
	.theme-trigger:hover .selector-arrow {
		transform: rotate(90deg);
	}
	
	/* 主题选择器弹窗 */
	.theme-selector-popup {
		background: white;
		border-radius: 30rpx 30rpx 0 0;
		max-height: 80vh;
		overflow: hidden;
	}
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 30rpx 20rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		color: $cute-text-primary;
	}
	
	.popup-close {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: $cute-text-tertiary;
		border-radius: 50%;
		transition: all 0.3s;
		
		&:hover {
			background: #f0f0f0;
			color: $cute-text-primary;
		}
	}
	
	/* 主题网格 */
	.themes-grid {
		padding: 30rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		max-height: 60vh;
		overflow-y: auto;
	}
	
	/* 主题卡片 */
	.theme-card {
		border-radius: 20rpx;
		overflow: hidden;
		border: 3rpx solid transparent;
		transition: all 0.3s;
		position: relative;
		cursor: pointer;
		
		&:hover {
			transform: translateY(-5rpx);
			box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, 0.1);
		}
		
		&.active {
			border-color: $cute-primary;
			box-shadow: 0 0 0 4rpx rgba(144, 238, 144, 0.2);
		}
		
		&.previewing {
			border-color: $cute-accent;
			box-shadow: 0 0 0 4rpx rgba(255, 182, 193, 0.3);
		}
	}
	
	/* 主题预览区域 */
	.theme-preview {
		height: 200rpx;
		display: flex;
		flex-direction: column;
	}
	
	.preview-header {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
	}
	
	.preview-icon {
		font-size: 32rpx;
	}
	
	.preview-text {
		font-size: 24rpx;
		font-weight: 500;
	}
	
	.preview-body {
		flex: 1;
		padding: 15rpx 20rpx;
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}
	
	.preview-item {
		display: flex;
		align-items: center;
		gap: 15rpx;
	}
	
	.preview-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
	}
	
	.preview-label {
		flex: 1;
		font-size: 22rpx;
	}
	
	.preview-amount {
		font-size: 24rpx;
		font-weight: 500;
	}
	
	/* 主题信息 */
	.theme-info {
		padding: 20rpx;
		background: white;
		text-align: center;
	}
	
	.theme-name {
		display: block;
		font-size: 28rpx;
		font-weight: 600;
		color: $cute-text-primary;
		margin-bottom: 8rpx;
	}
	
	.theme-desc {
		display: block;
		font-size: 22rpx;
		color: $cute-text-tertiary;
		line-height: 1.4;
	}
	
	/* 选中状态指示器 */
	.selected-indicator {
		position: absolute;
		top: 15rpx;
		right: 15rpx;
		width: 40rpx;
		height: 40rpx;
		background: $cute-primary;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.2);
	}
	
	.check-icon {
		color: white;
		font-size: 24rpx;
		font-weight: bold;
	}
	
	/* 预览状态指示器 */
	.preview-indicator {
		position: absolute;
		top: 15rpx;
		left: 15rpx;
		background: $cute-accent;
		padding: 6rpx 12rpx;
		border-radius: 15rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.2);
	}
	
	.preview-indicator .preview-text {
		color: white;
		font-size: 20rpx;
		font-weight: 500;
	}
	
	/* 操作按钮 */
	.popup-actions {
		padding: 30rpx;
		display: flex;
		gap: 20rpx;
		border-top: 2rpx solid #f0f0f0;
	}
	
	.action-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		border: none;
		font-size: 32rpx;
		font-weight: 500;
		transition: all 0.3s;
		
		&.cancel {
			background: #f5f5f5;
			color: #666;
			
			&:hover {
				background: #e8e8e8;
			}
		}
		
		&.confirm {
			background: linear-gradient(135deg, $cute-primary, $cute-primary-light);
			color: white;
			
			&:hover:not(:disabled) {
				transform: translateY(-2rpx);
				box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
			}
			
			&:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}
		}
	}
	
	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.themes-grid {
			grid-template-columns: 1fr;
		}
		
		.theme-card {
			.theme-preview {
				height: 160rpx;
			}
			
			.preview-header {
				height: 60rpx;
			}
		}
	}
</style>
